<!--
 *@开发者: 刘翔
 *@创建时间: 2024-04-29 16:38:53
 *@描述: 总结
!-->
<template>
	<div class="page-tile-25">
		<div class="card">
			<div v-for="(item, index) in titleData" :key="index">
				<div v-if="item.titleValue">
					<div style="font-size: 2rem; font-weight: 600">
						{{ item.titleName }}、{{ item.titleKey }}
					</div>
					<div v-html="item.titleValue"></div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	// 组件名称
	name: 'pageTile25',
	// 组件参数 接收来自父组件的数据
	props: {},
	// 局部注册的组件
	components: {},
	// 组件状态值
	data () {
		return {
			i: 0,
			titleData: [{ 'titleName': '一', 'titleValue': null }, { 'titleName': '二', 'titleValue': null }, { 'titleName': '三', 'titleValue': null }, { 'titleName': '四', 'titleValue': null }, { 'titleName': '五', 'titleValue': null }, { 'titleName': '六', 'titleValue': null }, { 'titleName': '七', 'titleValue': null }, { 'titleName': '八', 'titleValue': null }, { 'titleName': '九', 'titleValue': null }, { 'titleName': '十', 'titleValue': null }],
		}
	},
	// 计算属性
	computed: {},
	// 侦听器
	watch: {},
	// 组件方法
	methods: {
		init (htmlText) {
			this.i = 0;
			for (const key in htmlText) {
				this.titleData[this.i].titleValue = htmlText[key];
				this.titleData[this.i].titleKey = key;
				this.i += 1;
			}
		}
	},
	created () {
	},
	mounted () {
	},
}
</script>

<style lang="less" scoped>
	.page-tile-25 {
		height: 100%;
		.card {
			margin: 0 20px;
			padding: 2%;
			display: flex;
			flex-direction: column;
			height: 100%;
			line-height: 50px;
			font-size: 2rem;
			background: #fff2ca;
			border-radius: 16px;
			border: 1px solid #000;
			overflow: hidden;
		}
	}
</style>
